/*
 * @Author: zhangzhen
 * @Date: 2022-12-30 09:12:30
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-04-19 13:30:51
 *
 */
import React, { FC, useContext, useEffect, useCallback } from 'react';
import { Form, Button, Row, Col } from 'antd';
import { useDrop, DropTargetMonitor } from 'react-dnd';
import { FormContext, FormConTextValueType } from '../context';
import {
    InputComponent,
    SelectComponent,
    TextAreaComponent,
    InputNumberComponent,
    RadioComponent,
    CheckboxComponent,
    RangePickerComponent,
    DatePickerComponent,
    TableComponent,
} from '../components';
import EditBox from '../components/editBox';
import styles from './styles.module.scss';
import { ItemTypes } from '../constant';
import FormLayout from './formLayout';
import { useNavigate } from 'react-router-dom';

export enum FormItemType {
    Select = 'select',
    Input = 'input',
    TextArea = 'textarea',
    InputNumber = 'inputNumber',
    RangePicker = 'rangePicker',
    DatePicker = 'datePicker',
    Radio = 'radio',
    Checkbox = 'checkbox',
    Table = 'table',
    TreeSelect = 'treeSelect',
    DragPlaceholder = 'dragPlaceholder',
    Upload = 'upload',
}

const Main: FC<any> = ({ isEdit, onlyShowForm, onSubmit, checkForm,formDefaultValue }) => {
    const {
        formConTextValue,
        setFormConTextValue,
        setIsEditing,
        isEditing,
        setFormRef,
        setCurrentItem,
        setCurrentIndex,
        layoutParams
    } = useContext(FormContext);
    const [form] = Form.useForm();
    const { colSpan, labelCol, layout } = layoutParams;

    const navigate = useNavigate()

    useEffect(() => {
        setFormRef(form);
    }, [form, setFormRef]);
    // 可拖拽方法
    const [, dropRef] = useDrop({
        accept: ItemTypes.Field,

        collect: (monitor: DropTargetMonitor) => ({
            // 开始拖拽
            canDrop: monitor.canDrop(),
        }),
    });

    const currentFormItem = (key: FormItemType, item: FormConTextValueType) => {
        switch (key) {
            case FormItemType.Input:
                return (

                    <InputComponent {...item} />
                );
            case FormItemType.InputNumber:
                return (

                    <InputNumberComponent {...item} />
                );
            case FormItemType.TextArea:
                return (

                    <TextAreaComponent {...item} />
                );

            case FormItemType.Select:
                return (

                    <SelectComponent {...item} />
                );

            case FormItemType.Radio:
                return (

                    <RadioComponent {...item} />
                );

            case FormItemType.Checkbox:
                return (

                    <CheckboxComponent {...item} />
                );
            case FormItemType.DatePicker:
                return (
                    <DatePickerComponent {...item} />
                );

            case FormItemType.RangePicker:
                return (

                    <RangePickerComponent {...item} />
                );
            case FormItemType.Table:
                return (

                    <TableComponent {...item} />
                );

            case FormItemType.DragPlaceholder:
                return (
                    <Col span={24 / colSpan} key={item.key}>
                        <div
                            style={{
                                height: '120px',
                                backgroundColor:
                                    'rgb(255, 255, 255,0.3)',
                            }}
                        />
                    </Col>
                );

            default:
                return null;
        }
    }





    return (
        <div
            className={styles.mainBox}
            style={checkForm || onlyShowForm ? { width: '100%' } : {}}
            ref={dropRef}>
            {isEdit && !onlyShowForm && (
                <div className={styles.mainBoxOperate}>
                    <Button
                        style={{ marginRight: "3px" }}
                        type="primary"
                        onClick={() => {
                            setIsEditing(!isEditing);
                            setCurrentItem({});
                            setCurrentIndex(null);
                        }}>
                        {isEditing ? '编辑中...' : '编辑'}
                    </Button>
                    <Button
                        style={{ marginRight: "3px" }}
                        type="primary"
                        onClick={() => {
                            setCurrentItem({});
                            setCurrentIndex(null);
                            setFormConTextValue([]);
                        }}>
                        清空
                    </Button>
                    <Button type="primary" onClick={() => {
                        navigate("/use", {
                            state: {
                                fieldList: formConTextValue, layout: {
                                    colSpan, labelCol, layout
                                }
                            },

                        })
                    }}>
                        使用
                    </Button>
                    {/* <FormLayout /> */}
                </div>
            )}
            <div className={styles.mainBoxForm}>
                <Form
                    form={form}
                    wrapperCol={{ flex: 1 }}
                    labelAlign="right"
                    labelWrap
                    layout={layout}
                    onFinish={onSubmit}
                    initialValues={formDefaultValue}
                >
                    <Row gutter={8}>
                        {formConTextValue.map((item: any, index: number) => {
                            return <EditBox
                                checkForm={checkForm}
                                onlyShowForm={onlyShowForm}
                                index={index}
                                key={item.name}
                            >
                                {currentFormItem(item.key, item)}
                            </EditBox>
                        })}
                    </Row>
                </Form>
            </div>
        </div>
    );
};

export default Main;
